<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="[ '4']">
          <el-sub-menu index="2" :disabled="!isDoctor">
            <template #title>
              <el-icon>
                <icon-menu/>
              </el-icon>
              患者就诊
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="rescueInfo">就诊管理</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="1" :disabled="!isDoctor">
            <template #title>
              <el-icon>
                <ShoppingTrolley/>
              </el-icon>
              排班信息
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="schedulingInfo">排班信息</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3" :disabled="!isDoctor">
            <template #title>
              <el-icon>
                <ShoppingTrolley/>
              </el-icon>
              预约信息
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="appointmentInfo">预约挂号信息</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="6" :disabled="!isDoctor">
            <template #title>
              <el-icon>
                <ShoppingTrolley/>
              </el-icon>
              在线咨询
            </template>
            <el-menu-item-group>
              <el-menu-item index="6-1" @click="onlineAsk">在线咨询</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

<!--          <el-sub-menu index="5" :disabled="!isDoctor">-->
<!--            <template #title>-->
<!--              <el-icon>-->
<!--                <BellFilled/>-->
<!--              </el-icon>-->
<!--              病例管理-->
<!--            </template>-->
<!--            <el-menu-item-group>-->
<!--              <el-menu-item index="5-1" @click="caseInfo">病例信息</el-menu-item>-->
<!--            </el-menu-item-group>-->
<!--          </el-sub-menu>-->
          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <CollectionTag/>
              </el-icon>
              个人信息
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="goUserInfo">个人信息</el-menu-item>
              <el-menu-item index="4-2" @click="authStatus">医师申请</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 14px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting/>
            </el-icon>
            <el-icon>
              <Setting/>
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="Logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-main>
        <el-scrollbar class="router_view">
          <router-view></router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import axios from "axios";
import {reactive, ref} from "vue";
import {BellFilled, CollectionTag, Menu as IconMenu, Setting, ShoppingTrolley,} from "@element-plus/icons-vue";
import router from "@/router";
import {ElMessage} from "element-plus";

const GoIndex = () => {
  router.push("/");
};
const headers = {
  token:localStorage.getItem("doctor-auth-token")
}
const isDoctor = ref(false)
const getDoctorInfo = () => {
  axios.post("/api/doctor/info/info", {}, {headers})
      .then(res => {
        const msg = res.data.message
        isDoctor.value  = msg.status == 2
      })
}
const userInfo = reactive({
  account: "",
  address: "",
  balance: 0,
  bornDate: new Date(),
  demo: "",
  email: "",
  img: "",
  inputTime: new Date(),
  qqNum: "",
  sex: "未知",
  updateTime: new Date(),
  username: "",
  wxNum: "",
});

const token = ref(localStorage.getItem("doctor-auth-token"));
const getUserInfo = () => {
  // console.log(token.value);
  axios
      .post("/api/auth/check/医生", null, {headers: {token: token.value,}})
      .then((res) => {
        console.log(res);
        if (res.data.success) {
          localStorage.setItem("doctor-auth-token", res.data.message);
        } else {
          ElMessage({
            message: res.data.message,
            type: "error",
          });
          setTimeout(() => {
            router.push("/auth/login");
          }, 300);
        }
      })
      .catch((err) => {
        // console.log(err);
        ElMessage({
          message: err.data.message,
          type: "error",
        });
        setTimeout(() => {
          router.push("/auth/login");
        }, 300);
      });
}

const getAdminInfo = () => {
  axios.post("/api/auth/userinfo", null, {headers: {token: token.value,}})
      .then((res) => {
        // console.log("res :", res);
        if (res.data.success) {
          const msg = res.data.message;
          if (msg.account) userInfo.account = msg.account;
          if (msg.address) userInfo.address = msg.address;
          userInfo.balance = msg.balance;
          if (msg.bornDate) userInfo.bornDate = msg.bornDate;
          if (msg.demo) userInfo.demo = msg.demo;
          if (msg.email) userInfo.email = msg.email;
          if (msg.img) userInfo.img = msg.img;
          userInfo.inputTime = msg.inputTime;
          if (msg.qqNum) userInfo.qqNum = msg.qqNum;
          if (msg.sex) userInfo.sex = msg.sex;
          if (msg.updateTime) userInfo.updateTime = msg.updateTime;
          if (msg.username) userInfo.username = msg.username;
          if (msg.wxNum) userInfo.wxNum = msg.wxNum;
        }
      })
      .catch((err) => {
        console.log("err :", err);
      });
};

const Logout = () => {
  localStorage.removeItem("doctor-auth-token");
  ElMessage({
    message: "退出登录成功",
    type: "success",
  });
  setTimeout(() => {
    router.push("/");
  }, 800);
};
const rescueInfo = () => {
  router.push("/doctor/rescue-info");
};
const schedulingInfo = () => {
  router.push("/doctor/scheduling-info");
};

const appointmentInfo = () => {
  router.push("/doctor/appointment-info");
};
const onlineAsk = () => {
  router.push("/doctor/online-ask");
};
const patientInfo = () => {
  router.push("/doctor/patient-info");
};
const caseInfo = () => {
  router.push("/doctor/case-info");
};
const goUserInfo = () => {
  router.push("/doctor/user-info");
};
const authStatus = () => {
  router.push("/doctor/auth-status");
};

getUserInfo();
getAdminInfo();
getDoctorInfo()

setInterval(()=>{
  getDoctorInfo()
},3000)
</script>

<style lang="scss" scoped>
.layout-container-demo .el-header {
  position: relative;
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

._card {
  display: flex;
  align-items: center;

  ._card_left {
    width: 100px;
    margin-right: 15px;
  }
}

.log {
  display: flex;
  align-items: center;

  .log_img {
    height: 55px;
    border-radius: 5px;
    margin-left: 20px;
  }
}
</style>
